<template>
    <div class="addCart">
        <div class="head">
            <van-nav-bar
            :title="this.info.name"
            left-text="返回"
            left-arrow
            @click-left="onClickLeft"
            />
        </div>
        <div class="contentbox">
            <div class="swiper">
                <van-swipe class="my-swipe" :autoplay="3000" >
                    <van-swipe-item v-for="item in banner" :key="item.id" >
                        <img :src="item.img_url">
                    </van-swipe-item>
                </van-swipe>
                <div class="swiper_btm">
                    <div>30天无忧退货</div>
                    <div>48小时快速退款</div>
                    <div>满88元免邮费</div>
                </div>
            </div>
            <div class="goodsinfo">
                <p>{{this.info.name}}</p>
                <p>{{this.info.goods_brief}}</p>
                <p>￥{{this.info.retail_price}}</p>
            </div>
            <div class="section-nav">
                <van-cell title="请选择规格数量" is-link title-class="nav"  @click="showControl"/>
            </div>
            <div class="attribute">
                <p class="attribute-head"> 商品参数 </p>
                <p class="item" v-for="item in attribute" :key="item.name">
                    <span>{{item.name}}</span>
                    <span>{{item.value}}</span>
                </p>
            </div>
            <div class="desc" v-html="this.info.goods_desc"></div>
            <div class="common-problem">
                <div class="h">
                    <div class="line"></div>
                    <div class="title">常见问题</div>
                    <div class="line"></div>
                </div>
                
                <div class="b">
                    <div class="item" v-for="item in issue" :key="item.id">
                        <div class="question-box">
                            <div class="spot"></div>
                            <div class="question">{{item.question}}</div>
                        </div>
                        <div class="answer">{{item.answer}}</div>
                    </div>
                </div>
            </div>

            <div class="sortlist">
                <div class="h">
                    <div class="line"></div>
                    <div class="title">大家都在看</div>
                    <div class="line"></div>
                </div>
                <van-grid :column-num="2" :gutter="5" >
                    <van-grid-item  v-for=" item in goodslist" :key="item.id" @click="toFresh(item.id)" replace>
                        <van-image :src="item.list_pic_url"  class="img"/>
                        <p class="name">{{item.name}}</p>
                        <p class="price">￥{{item.retail_price}}</p>
                    </van-grid-item>
                </van-grid>
            </div>
        </div>
        <div class="btm">
            <van-goods-action class="mune">
                <van-goods-action-icon icon="star-o" text="收藏"  v-if="!isCollect" @click="collected"/>
                <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" @click="collected" v-else />
                <van-goods-action-icon icon="cart-o" text="购物车" :badge="this.number"  to="/cart"/>
                <van-goods-action-button type="warning" text="加入购物车" @click="addCar"/>
                <van-goods-action-button type="danger" text="立即购买" />
            </van-goods-action>
        </div>
        <!-- 选择规格参数面板 -->
        <div v-if="isShow" class="control" >
            <van-overlay class="mask" :show="isShow" @click="isShow = false"/>
            <div class="b">
                <div class="top">
                    <div class="left">
                        <img :src="this.info.primary_pic_url" >
                    </div>
                    <div class="right">
                        <p class="price">价格 ￥{{this.info.retail_price}}</p>
                        <p>请选择数量</p>
                    </div>
                    <div class="close" @click="showControl"> X </div>
                </div>
                <div class="btm">
                    <p>数量</p>
                    <van-stepper v-model="value" />
                </div>
            </div>
        </div>


    </div>
</template>

<script>
    import {addCart,cartList} from '@/api/cart'
    import {addcollect} from '@/api/collected'
    import {goodsInfo} from '@/api/cart/goods'
    import { mapMutations } from 'vuex'
    export default {
        data() {
            return {
                banner:[],
                info:{},
                attribute:[],
                issue:[],
                goodslist:[],
                isCollect:"",
                isShow:false,
                value:"",
                number:0
            }
        },
        methods: {
            onClickLeft(){
                this.$router.go(-1);
                this.$store.commit('setInfo',"")
            },
            toFresh(id){
                const data= {
                    id:id,
                    openId: localStorage.getItem('openId')
                };
                goodsInfo(data)
                .then(res=>{
                    console.log(res);
                    this.banner=res.gallery
                    this.info=res.info
                    this.attribute=res.attribute
                    this.issue=res.issue
                    this.goodslist=res.productList
                })
                this.$router.go(0)
                
            },
            showControl(){
                this.isShow=!this.isShow;
            },
            addCar(){
                
                if(this.isShow){

                    const data={
                        goodsId:this.info.id,
                        number:this.value,
                        openId:localStorage.getItem('openId')
                     }
                    
                    console.log(data);
                    addCart(data)
                    .then(res=>{
                         console.log(res);
                     })
                    
                    cartList({
                        openId:localStorage.getItem('openId')
                    }).then(res=>{
                        console.log(res);
                        res.data.forEach(el => {
                            this.number+=el.number
                            
                        });
                    })
                    
                     

                }
                this.isShow=true;
                console.log(this.number);
            },
            collected(){
                const data={
                    goodsId:this.info.id,
                    openId:localStorage.getItem('openId')
                }
                addcollect(data).then(res=>{
                    console.log(res);
                    this.toFresh()
                })
            }

        },
        created() {
            const data= {
                id:this.$route.query.id,
                openId: localStorage.getItem('openId')
            };
           
            goodsInfo(data)
            .then(res=>{
                this.banner=res.gallery
                this.info=res.info
                this.attribute=res.attribute
                this.issue=res.issue
                this.goodslist=res.productList
                this.isCollect=res.collected
                console.log(res);
            })
            cartList({
                openId:localStorage.getItem('openId')
            }).then(res=>{
                console.log(res);
                res.data.forEach(el => {
                    this.number+=el.number
                    
                });
            })

            
        },
        mounted () {
            this.$router.afterEach((to, from, next) => {
                window.scrollTo(0, 0)
            })
            
        },

    }
</script>

<style lang="scss" scoped>

.head {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9;
}
.contentbox {
    margin-top: 50px;
}
.addCart{
    background-color: #eee;
   
}
.btm{
    position: relative;
    z-index: 99;
}

.swiper{

    img{
        width: 100%;
        height: 375px;
    }
    .swiper_btm{
        display: flex;
        justify-content: space-between;
        padding: 15px 10px;
        background-color: #eee;

        div{
            background: url('./../../../assets/images/point.png') no-repeat 0 center;
            background-size: 5px;
            padding-left: 7.5px;
            font-size: 15px;
            color: #666;
        }
    }
}
.goodsinfo{
    width: 100%;
    height: 153px;
    background: #fff;
    margin: auto;
    border-bottom: 1Px solid #f4f4f4;

    p:nth-child(1){
        font-size: 20px;
        padding: 10px;
        font-weight: 700;
    }
    p:nth-child(2){
        font-size: 12px;
        color: #999;
    }
    p:nth-child(3){
        font-size: 18px;
        color: #b4282d;
    }

}
.section-nav{
    height: 54px;
    margin-bottom: 10px;

    .nav{
        text-align: left;
        font-size: 12px;
        font-weight: normal;
    }

}

.attribute{
    padding: 10px 15px;
    background-color: #fff;
    margin-bottom: 10px;
    text-align: left;

    .attribute-head{
        font-size: 18px;
        padding: 10px 0;
        margin: 0;
        font-weight: 700;
    }

    .item{
        display: flex;
        background-color: #f7f7f7;
        padding: 10px 0;
        margin: 10px;

        span:nth-child(1){
            width: 68px;
            font-size: 12px;
        }
        span:nth-child(2){
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            font-size: 12px;
        }

    }
}

.common-problem{
    margin-bottom: 55px;
    background-color: #fff;

    .h{
        padding: 17.5px;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;

        .line{
            width: 50px;
            height: 1Px;
            background-color: #ccc;

        }
        .title{
            padding: 0 12.5px;
            font-size: 12px;
        }
    }

    .b{
        padding: 0 15px;

        .item{
            padding-bottom: 12.5px;
        }

        .question-box{
            display: flex;
            align-items: center;
            font-size: 12px;


            .spot{
                height: 4px;
                width: 4px;
                background-color: #b4282d;
                border-radius: 50%;
            }

            .question{
                padding-left: 8px;
                font-size: 12px;
                font-weight: 700;
                color: #303030;
                padding-bottom: 7.5px;
            }
        }
        .answer{
            line-height: 20px;
            padding-left: 8px;
            font-size: 12px;
            color: #787878;
            text-align: left;
        }
    }
}
.sortlist{


    .h{
        background-color: #fff;
        padding: 17.5px;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;

        .line{
            width: 50px;
            height: 1Px;
            background-color: #ccc;

        }
        .title{
            padding: 0 12.5px;
            font-size: 12px;
        }
      }
}


.control{
    position: fixed;
    bottom: 50px;
    width: 100%;
    z-index: 99;
    .mask{
        height: calc(100% - 50px);
    }
   .b{
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 200px;
        background-color: #fff;
        z-index: 100;
        animation:mymove .5s;
        padding: 15px;

        .top{
            display: flex;
            margin-bottom: 17.5px;
            position: relative;

            .left{
                width: 88px;
                height: 88px;
                margin-right: 15px;

                img{
                    display: block;
                    width: 88px;
                    height: 88px;
                }

            }
            .right{
                .price{
                    color: #b4282d;
                }
            }

            .close{
                position: absolute;
                top: 0;
                right: 30px;
                font-size: 15px;
                color: #999;
            
            }

        }

    }
    .btm{
        text-align: left;
    }
}

@keyframes mymove{
    0% {
        height: 0;
    };
    100%{
        height: 200px;
    }
}


</style>